<template>
    <div class="repository-detail">
      <!-- 顶部导航 -->
      <div class="repo-nav">
        <div class="nav-left">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>
              <router-link to="/admin/repository">代码库</router-link>
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ repository.owner }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ repository.name }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="nav-right">
          <el-button-group>
            <el-button size="small">
              <i class="el-icon-star-off"></i> Star <span class="count">{{ repository.stars }}</span>
            </el-button>
            <el-button size="small">
              <i class="el-icon-share"></i> Fork <span class="count">{{ repository.forks }}</span>
            </el-button>
          </el-button-group>
        </div>
      </div>
  
      <!-- 主要内容区 -->
      <div class="repo-main">
        <!-- 分支和操作区 -->
        <div class="branch-bar">
          <div class="branch-left">
            <el-dropdown trigger="click" @command="handleBranchChange">
              <el-button class="branch-btn">
                <i class="el-icon-s-operation"></i>
                {{ currentBranch }}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="branch in branches" :key="branch" :command="branch">
                  {{ branch }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="branch-right">
            <el-button-group>
              <el-button type="primary" class="clone-btn">
                克隆/下载 <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-button>创建流水线</el-button>
              <el-button icon="el-icon-more"></el-button>
            </el-button-group>
          </div>
        </div>
  
        <!-- 最新提交信息 -->
        <div class="commit-info">
          <div class="commit-left">
            <el-avatar :size="24" :src="repository.lastCommitter.avatar"></el-avatar>
            <span class="commit-message">{{ repository.lastCommit.message }}</span>
          </div>
          <div class="commit-right">
            <span class="commit-id">{{ repository.lastCommit.shortId }}</span>
            <span class="commit-time">{{ repository.lastCommit.time }}</span>
          </div>
        </div>
  
        <!-- 文件列表 -->
        <div class="file-list">
          <el-table :data="files" style="width: 100%">
            <el-table-column width="36">
              <template slot-scope="scope">
                <i :class="getFileIcon(scope.row.type)" :style="getFileIconStyle(scope.row.type)"></i>
              </template>
            </el-table-column>
            <el-table-column label="名称">
              <template slot-scope="scope">
                <router-link :to="getFilePath(scope.row)" class="file-name">
                  {{ scope.row.name }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column prop="lastCommit.message" label="最后提交信息" show-overflow-tooltip></el-table-column>
            <el-table-column prop="lastCommit.time" label="更新时间" width="180" align="right"></el-table-column>
          </el-table>
        </div>
  
        <!-- README 预览 -->
        <div v-if="repository.readme" class="readme-section">
          <div class="readme-header">
            <h2><i class="el-icon-document"></i> README.md</h2>
          </div>
          <div class="readme-content" v-html="repository.readme"></div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'RepositoryDetail',
    data() {
      return {
        currentBranch: 'master',
        branches: ['master', 'develop', 'feature/new-ui'],
        repository: {
          id: 1,
          name: 'shiqu-crm',
          owner: 'newzhilehuo',
          visibility: 'private',
          stars: 90,
          forks: 645,
          lastCommitter: {
            avatar: 'https://example.com/avatar.jpg'
          },
          lastCommit: {
            message: 'Merge #645 into master from guohuaguang',
            shortId: '4d6328e',
            time: '昨天 23:26'
          },
          readme: '<h1>shiqu-crm</h1><p>师趣CRM系统...</p>'
        },
        files: [
          {
            type: 'dir',
            name: 'src',
            lastCommit: {
              message: 'Merge #645 into master from guohuaguang',
              time: '昨天 23:26'
            }
          },
          {
            type: 'file',
            name: '.gitignore',
            lastCommit: {
              message: 'haobo init',
              time: '2024-08-19 18:59'
            }
          }
          // ... 其他文件
        ]
      }
    },
    methods: {
      handleBranchChange(branch) {
        this.currentBranch = branch
      },
      getFileIcon(type) {
        return type === 'dir' ? 'el-icon-folder' : 'el-icon-document'
      },
      getFileIconStyle(type) {
        return {
          color: type === 'dir' ? '#79b8ff' : '#959da5',
          fontSize: '16px'
        }
      },
      getFilePath(file) {
        return `/admin/repository/${this.repository.id}/blob/${this.currentBranch}/${file.name}`
      }
    }
  }
  </script>
  
  <style scoped>
  .repository-detail {
    background: #fff;
  }
  
  .repo-nav {
    padding: 16px 24px;
    border-bottom: 1px solid #e1e4e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .nav-right .count {
    margin-left: 4px;
    color: #586069;
  }
  
  .repo-main {
    padding: 0 24px;
  }
  
  .branch-bar {
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e1e4e8;
  }
  
  .branch-btn {
    font-size: 14px;
    padding: 8px 12px;
  }
  
  .branch-right {
    display: flex;
    gap: 8px;
  }
  
  .clone-btn {
    min-width: 120px;
  }
  
  .commit-info {
    margin: 16px 0;
    padding: 8px 16px;
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .commit-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .commit-message {
    color: #24292e;
    font-size: 14px;
  }
  
  .commit-right {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #586069;
    font-size: 12px;
  }
  
  .commit-id {
    font-family: monospace;
  }
  
  .file-list {
    margin: 16px 0;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
  }
  
  .file-name {
    color: #0366d6;
    text-decoration: none;
  }
  
  .file-name:hover {
    text-decoration: underline;
  }
  
  .readme-section {
    margin: 24px 0;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
  }
  
  .readme-header {
    padding: 8px 16px;
    background: #f6f8fa;
    border-bottom: 1px solid #e1e4e8;
  }
  
  .readme-header h2 {
    margin: 0;
    font-size: 14px;
    color: #24292e;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .readme-content {
    padding: 16px;
    color: #24292e;
    font-size: 14px;
    line-height: 1.5;
  }
  
  /* Element UI 样式覆盖 */
  >>> .el-breadcrumb__inner {
    color: #0366d6;
    font-weight: 600;
  }
  
  >>> .el-breadcrumb__inner:hover {
    color: #0366d6;
    text-decoration: underline;
  }
  
  >>> .el-table {
    border: none;
  }
  
  >>> .el-table th {
    background: #f6f8fa;
    border-top: 1px solid #e1e4e8;
  }
  
  >>> .el-table td {
    border-bottom: 1px solid #e1e4e8;
  }
  
  >>> .el-table--border::after,
  >>> .el-table--group::after,
  >>> .el-table::before {
    display: none;
  }
  </style>